<template>
  <div class="sa-container">
    <el-form ref="searchForm" :model="form" label-width="15px">
      <el-row style="margin-top: 6px">
        <el-col :span="22">
          <el-col :span="3">
            <el-form-item prop="searchCode">
              <el-select v-model="form.searchCode" size="small" placeholder="请选择">
                <el-option
                    v-for="item in optionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="searchVal">
              <el-input v-model.trim="form.searchVal" size="small" clearable
                        placeholder="搜索内容">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 15px">
            <el-button type="primary" size="small" class="search" icon="el-icon-search" @click="fetchList">搜索
            </el-button>
            <el-button type="primary" size="small" class="reset" icon="el-icon-refresh" @click="restTable">重置
            </el-button>
          </el-col>
        </el-col>
        <el-col :span="2" style="text-align: center">
          <el-button type="primary" size="small" class="reset" icon="iconPlus iconfont icon-icon_plus"
                     @click="addUserHandle">新增用户
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="100%"
        ref="dataTable"
        header-row-class-name="headerClass"
        style="width: 100%">
      <el-table-column
          prop="account"
          label="登录名"
          align="center"
          min-width="20">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          align="center"
          min-width="20">
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="所属角色"
          align="center"
          min-width="20">
      </el-table-column>
      <el-table-column
          prop="contactTel"
          label="手机号"
          align="center"
          min-width="20">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          align="center"
          min-width="20">
      </el-table-column>
      <el-table-column
          label="状态"
          align="center"
          min-width="12">
        <template slot-scope="s">
          <span style="background-color: lightgray" v-if="s.row.deleteFlag == 'DELETED'">停用</span>
          <span v-if="s.row.deleteFlag == 'USED'">启用</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          align="center"
          min-width="14"
          label="操作">
        <template slot-scope="scope">
          <i class="iconfont icon-modify modifyIcon" @click="modifyHandle(scope.row)"></i>
          <span class="line"></span>
          <i class="iconfont icon-delete deleteIcon" v-if="scope.row.deleteFlag == 'USED' && $permission('deleteHandle')"
             @click="deleteHandle(scope.row)"></i>
          <i class="iconfont icon-revocation doorIcon" v-if="scope.row.deleteFlag == 'DELETED' && $permission('deleteHandle')"
             @click="revokeHandle(scope.row)"></i>
          <span class="line" v-if="$permission('deleteHandle')"></span>
          <i class="iconfont icon-door doorIcon" @click="chooseHandle(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="bgColor">
      <el-pagination
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          @current-change="pageFetchList"
          @size-change="pageFetchList"
          layout="total, prev, pager, next, sizes, jumper"
          :total="page.total">
      </el-pagination>
    </div>
    <add-user-dialog @success="pageFetchList" :show.sync="addUserDialogShow" :current-id="currentUserId"/>
  </div>
</template>

<script>
import addUserDialog from '@/views/settingManage/userManage/add-user-dialog'
import {table} from '@/common/mixin'

export default {
  name: "UserList",
  mixins: [table],
  components: {
    addUserDialog
  },
  data() {
    return {
      form: {
        searchCode: 'account',
        searchVal: null,
      },
      addUserDialogShow: false,
      currentUserId: '',
      optionList: [{
        value: "account",
        label: '登录名'
      }, {
        value: "name",
        label: '姓名'
      }, {
        value: "contactTel",
        label: '手机号'
      }, {
        value: "roleName",
        label: '角色名'
      }],
      currentRoleId: '',
      accountListDialogShow: false,
    }
  },
  methods: {
    //启用用户
    async revokeHandle(row) {
      this.$confirm('确定启用该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$post(this.$api.systemSettings.userManage.deleteUser, JSON.stringify({
          userId: row.userId,
          deleteFlag : 'USED'
        }))
        await this.$message({type: 'success', message: '启用成功！'})
        await this.pageFetchList()
      }).catch(() => {

      })
    },
    //停用用户
    async deleteHandle(row) {
      this.$confirm('确定停用该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$post(this.$api.systemSettings.userManage.deleteUser, JSON.stringify({
          userId: row.userId,
          deleteFlag : 'DELETED'
        }))
        await this.$message({type: 'success', message: '停用成功！'})
        await this.pageFetchList()

      }).catch(() => {

      })
    },
    // 修改用户
    modifyHandle(row) {
      this.addUserDialogShow = true;
      this.currentUserId = row.userId;
    },
    // 新增用户
    addUserHandle() {
      this.addUserDialogShow = true;
      this.currentUserId = '';
    },
    async restTable() {
      this.$refs.searchForm.resetFields();
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      await this.fetchList()
    },
    chooseHandle(row) {
      this.currentRoleId = row.userId;
      this.accountListDialogShow = true;
    },
    getParams() {
      let obj = {};
      obj[this.form.searchCode] = this.form.searchVal;
      return obj
    },
    // 查询列表信息
    async fetchList() {
      let params = this.getParams();
      await this.tableFetch(this.$api.systemSettings.userManage.list, JSON.stringify({
            ...params,
            ...this.page,
            currentPage: 1,
          })
      )
      this.page.currentPage = 1;
    },
    async pageFetchList() {
      let params = this.getParams();
      await this.tableFetch(this.$api.systemSettings.userManage.list, JSON.stringify({
            ...params,
            ...this.page
          })
      )
    },
  },
  async activated() {
    this.$refs.dataTable.doLayout()
    await this.fetchList()
  },
  async mounted() {
    this.$refs.dataTable.doLayout()
    await this.fetchList()
  }

}
</script>


<style lang="scss" scoped>
.el-table {
  margin-top: 2px;
  flex: 1;
}

.search-form {
  background-color: white;
}

.el-form-item {
  margin-bottom: 7px !important;
}

.el-pagination {
  margin-top: 10px;
  text-align: center;
}

.sa-container {
  flex-flow: column;
  display: flex;
}
</style>
